<template>
  <div class="page16">
    <!-- 用过的人 -->
    <div class="contant fadeInDown" v-if="data.imMsgCnt">
      <div v-if="data.imMsgCnt>49">
        <p>2022年<span class="yellowfont"> “沟通空间”</span>的出现，让大家紧密互联。</p><p> 您共收发了<span class="yellowfont">{{
        data.imMsgCnt ?
          data.imMsgCnt : 0
      }}</span>条消息，
        <span class="yellowfont">{{ data.imMonth.split('-')[1].replace(/\b(0+)/gi, "") }}</span>月是您最忙碌的一个月。
      </p>

      </div>
     
      <p v-else>
        2022年<span class="yellowfont"> “沟通空间”</span>的出现，让大家紧密互联。 您共收发了<span class="yellowfont"> {{
        data.imMsgCnt ?
          data.imMsgCnt : 0
      }}</span>条消息。
      </p>
      <p>与智慧通用各项工作紧密融合，沟通更及时，协作更高效。</p>
    </div>
    <!-- 没用过的人 -->
    <div class="contant fadeInDown" v-else>
      <p>2022年<span class="yellowfont">“沟通空间”</span>的出现，让大家紧密互联。您貌似还没有在这里发过言，不妨试试高效便捷的沟通？</p>
    </div>
    <div class="img1">
      <!-- animate__backInUp -->
      <div class="center">
        <img class="people1" src="../../assets/images/bill2022/18/people1.png" alt="">
        <div class="airship">
          <img class="people animate__backInUp " src="../../assets/images/bill2022/18/people.png">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  components: {
  },
  // 定义属性
  data() {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='less' scoped>
.page16 {
  display: flex;
  align-items: center;
  flex-direction: column;

  .contant {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }

  .img1 {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 47rem;
    background: url(../../assets/images/bill2022/18/center.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    position: absolute;

    .center {
      position: relative;

      .people1 {
        width: 21.875rem;
        height: 16.8125rem;
        margin-top: 12rem;
      }

      .airship {
        animation: slideUp 1s ease-in-out;
      -webkit-animation: slideUp 1s ease-in-out;
      -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
      -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
      -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        position: absolute;
        left: 7.5rem;
        top: 23rem;

        img {
          width: 11.625rem;
          height: 23.625rem;
        }
      }

      @keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }

      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-webkit-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }

    @-moz-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-o-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-ms-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__backInUp {
  animation: backInUp 2s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes backInUp {
  0% {
    -webkit-transform: translatey(2000px) scale(0.4);
    transform: translatey(2000px) scale(0.4);
    opacity: 0.7;
  }

  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
</style>